<template>
  <div>
    <el-container>
      <el-header class="filters">
        <div>
          <el-row class="row-bg" style="margin-top: 2%">
            <el-col :md="8" :lg="5" :xl="4">
              <span style="font-size: 14px"> 名称： </span>
              <el-input v-model="inputform.projectname" class="inputs">
              </el-input>
            </el-col>
            <el-col :md="8" :lg="6" :xl="12">
              <span style="font-size: 14px"> 负责人： </span>
              <el-input v-model="inputform.testrunner" class="inputs">
              </el-input>
            </el-col>
            <el-col :md="6" :lg="3" :xl="3" style="margin-left: 20%">
              <el-button
                  @click="
                  dialogtype = '新增';
                  dialogFormVisible = true;
                "
              >
                <el-icon style="vertical-align: middle">
                  <plus/>
                </el-icon>
                <span>新增</span>
              </el-button>
              <el-button @click="ProjectList" :loading="load">
                <el-icon v-if="load == false" style="vertical-align: middle">
                  <Search/>
                </el-icon>
                <span>查询</span>
              </el-button>
            </el-col>
          </el-row>
        </div>
      </el-header>

      <el-main>
        <el-table
            v-loading="load"
            :data="Datas.data"
            style="width: 100%"
            empty-text="暂无数据"

        >
          <el-table-column type="index" :index="1" label="序号" width="100"/>
          <el-table-column prop="projectname" label="项目名称" width="300"/>
          <el-table-column prop="testrunner" label="测试负责人" width="200"/>
          <el-table-column prop="modulesNum" label="模块数量" width="200"/>
          <el-table-column
              prop="describe"
              show-overflow-tooltip
              label="备注"
              min-width="300"
          />
          <el-table-column
              prop="create_time"
              show-overflow-tooltip
              label="创建时间"
              min-width="300"
          />
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <el-button
                  type="success"
                  circle
                  @click="
                  detail(scope.row.id);
                  dialogtype = '详情';
                  dialogFormVisible = true;
                  proid = scope.row.id;
                "
              >
                <el-icon :size="15">
                  <!-- 详情 -->
                  <More/>
                </el-icon>
              </el-button>
              <el-button
                  type="warning"
                  circle
                  @click="
                  detail(scope.row.id);
                  dialogtype = '编辑';
                  dialogFormVisible = true;
                  proid = scope.row.id;
                "
              >
                <el-icon :size="15">
                  <!-- 编辑 -->
                  <Edit/>
                </el-icon>
              </el-button>

              <el-button
                  type="danger"
                  circle
                  @click="deleteProject(scope.row.id)"
              >
                <el-icon :size="15">
                  <!-- 删除 -->
                  <Delete/>
                </el-icon>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>
        <paginations
            :pages="pagedata"
            :handleCurrentChange="handleCurrentChange"
            :handleSizeChange="handleSizeChange"
        >
        </paginations>
      </el-footer>
    </el-container>
    <el-dialog
        v-model="dialogFormVisible"
        :title="dialogtype"
        destroy-on-close
        width="30%"
        @closed="reset"
    >
      <el-form
          ref="formlabelref"
          :model="form"
          label-position="top"
          :rules="rules"
      >
        <el-form-item
            label="项目名称"
            :label-width="formLabelWidth"
            prop="projectname"
        >
          <el-input v-model="form.projectname" autocomplete="off"/>
        </el-form-item>
        <el-form-item
            label="测试人员"
            :label-width="formLabelWidth"
            prop="testrunner"
        >
          <el-input v-model="form.testrunner" autocomplete="off"/>
        </el-form-item>
        <el-form-item
            label="备注"
            :label-width="formLabelWidth"
            prop="describe"
        >
          <el-input
              type="textarea"
              v-model="form.describe"
              autocomplete="off"
              show-word-limit
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span>
          <el-button @click="reset">取消</el-button>
          <el-button
              v-if="dialogtype === '新增'"
              type="primary"
              @click="AddProjecet(formlabelref)"
          >确定</el-button
          >
          <el-button
              v-else-if="dialogtype === '编辑'"
              type="primary"
              @click="editproject(proid, formlabelref)"
          >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {ref, reactive, onMounted} from "vue";
import {
  GetProjectList,
  AddProjectList,
  Projectdetail,
  editProject,
  delProject,
} from "@/api";
import {ElMessage, ElMessageBox} from "element-plus";
import {titleTest} from "../utils/checkrules";
import paginations from "./tools/paginations.vue";

export default {
  name: "ProjectList",
  setup() {
    const dialogFormVisible = ref(false);

    let dialogtype = ref("");

    const formLabelWidth = "140px";

    let proid = ref("");

    let formlabelref = ref(null);

    let form = ref({
      projectname: "",
      describe: "",
      testrunner: "",
    });

    let inputform = ref({
      projectname: "",
      describe: "",
      testrunner: "",
    });

    let load = ref(false);

    let Datas = ref({});
    let pagedata = ref({
      current_page: 1, //从第1页开始的话是这样写;
      content: 1, //内含5个对象的数组, 格式在下面介绍
      page: 1,
      page_size: 10, //用article_content.length, 根据数据量自动增页
    });

    function handleCurrentChange(val) {
      pagedata.value.current_page = val;
      console.log(pagedata);
      ProjectList();
    }

    function handleSizeChange(val) {
      pagedata.value.page_size = val;
      console.log(pagedata);
      ProjectList();
    }

    const rules = ref({
      projectname: [
        {required: true, message: "项目名称为必填项", trigger: "blur"},
        {max: 5, message: "最多5个字符", trigger: "blur"},
        {validator: titleTest, trigger: "blur"},
      ],
      testrunner: [
        {required: true, message: "项目名称为必填项", trigger: "blur"},
        {max: 5, message: "最多5个字符", trigger: "blur"},
        {validator: titleTest, trigger: "blur"},
      ],
    });

    function projectlist() {
      load.value = true;
      GetProjectList(
          inputform.value.projectname,
          inputform.value.testrunner,
          pagedata.value.current_page,
          pagedata.value.page_size
      )
          .then((res) => {
            if (res.data.code == 0) {
              load.value = false;
              Datas.value = res.data;
              pagedata.value.content = res.data.count;
              // console.log(pagedata.value.content)
            }
          })
          .catch((error) => {
            if (error) {
              ElMessage({
                message: error,
                type: "error",
                duration: 1000,
              });
            } else {
              ElMessage({
                message: res.data.msg,
                type: "error",
                duration: 1000,
              });
            }
            load.value = false;
          });
    }

    function AddProjecet(refs) {
      refs.validate((valid) => {
        if (valid) {
          AddProjectList(
              form.value.projectname,
              form.value.describe,
              form.value.testrunner
          )
              .then((res) => {
                reset();
                if (res.data.code == 0) {
                  ElMessage({
                    message: res.data.msg,
                    type: "success",
                    duration: 1000,
                  });
                  ProjectList();
                } else {
                  throw res.data.msg;
                }
              })
              .catch((error) => {
                ElMessage({
                  message: error,
                  type: "error",
                  duration: 1000,
                });
              });
        }
      });
    }

    function reset() {
      formlabelref.value?.resetFields();
      formlabelref.value?.clearValidate();
      dialogFormVisible.value = false;
    }

    function deleteProject(proid) {
      ElMessageBox.confirm("删除项目", "是否确认删除", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
        autofocus: false,
      })
          .then(() => {
            delProject(proid)
                .then((res) => {
                  if (res.data.code == 0) {
                    ElMessage({
                      message: res.data.msg,
                      type: "success",
                      duration: 1000,
                    });
                    ProjectList();
                  } else {
                    throw res.data.msg;
                  }
                })
                .catch((error) => {
                  ElMessage({
                    message: error,
                    type: "error",
                    duration: 1000,
                  });
                });
          })
          .catch(() => {
          });
    }

    function detail(proid) {
      Projectdetail(proid).then((res) => {
        form.value = res.data.data[0];
        console.log(form.value);
      });
    }

    function editproject(proid, refs) {
      console.log(refs);
      refs.validate((valid) => {
        if (valid) {
          console.log(proid);
          console.log(form);
          editProject(
              proid,
              form.value.projectname,
              form.value.describe,
              form.value.testrunner
          )
              .then((res) => {
                reset();
                if (res.data.code == 0) {
                  ElMessage({
                    message: res.data.msg,
                    type: "success",
                    duration: 1000,
                  });
                  ProjectList();
                } else {
                  throw res.data.msg;
                }
              })
              .catch((error) => {
                console.log(error);
                ElMessage({
                  message: error,
                  type: "error",
                  duration: 1000,
                });
              });
        }
      });
    }

    onMounted(() => {
      ProjectList();
    });

    return {
      dialogtype,
      ProjectList,
      Datas,
      load,
      AddProjecet,
      editproject,
      dialogFormVisible,
      formLabelWidth,
      inputform,
      form,
      formlabelref,
      reset,
      deleteProject,
      detail,
      proid,
      rules,
      handleCurrentChange,
      handleSizeChange,
      pagedata,
    };
  },
  components: {
    paginations,
  },
};
</script>
<style>
.filters {
  height: auto;
}

.inputs {
  width: 300px;
}

.icons {
  display: none;
}
</style>